<template>
  <Form ref="formRef" :model="formData" :rules="rules" :label-width="120">
    <FormItem label="网关端口：" prop="gatewayPort">
      <Select v-model="formData.gatewayPort" placeholder="请选择网关端口...">
        <Option
          v-for="item in gatewayPortList"
          :value="item.port"
          :key="item.port"
          :label="item.port"
        />
      </Select>
    </FormItem>
    <FormItem label="网关地址码：" prop="gatewayCode">
      <InputNumber
        v-model="formData.gatewayCode"
        placeholder="请输入网关地址码..."
        style="width:100%;"
      />
    </FormItem>
  </Form>
</template>
<script>
import { generateRules } from '../utils'
import { getGatewayList as httpGetGatewayList } from '@/api'

export default {
  props: {
    form: {
      type: Object,
      default: new Object()
    },
    collectType: String
  },
  data() {
    return {
      formData: { gatewayPort: '', gatewayCode: '' },
      gatewayPortList: [],
      rules: generateRules()
    }
  },
  watch: {
    form: {
      deep: true,
      handler(value, oldValue) {
        if (!(JSON.stringify(value) === JSON.stringify(oldValue))) {
          this.init()
        }
      }
    }
  },

  methods: {
    validate(callback) {
      this.$refs.formRef.validate(valid => {
        if (valid) {
          const params = {
            formData: Object.assign({}, this.form, this.formData)
          }
          callback(valid, params)
        } else {
          callback(valid)
        }
      })
    },

    init() {
      if (JSON.stringify(this.form) === '{}') return
      if (this.collectType !== 'wang-guan') return
      const { collectType, companyId } = this.form
      const params = { desCode: collectType, companyId }
      httpGetGatewayList(params).then(res => {
        if (res.data) {
          this.gatewayPortList = res.data
        } else {
          this.gatewayPortList = []
        }
      })
    },

    resetFields() {
      this.$refs.formRef.resetFields()
      this.formData.gatewayPort = ''
      this.formData.gatewayCode = ''
    }
  }
}
</script>
